<template>
  <bm-overlay pane="labelPane"
              :class="{sample: true}"
              @draw="draw"
              ref="customOverlay">
    <div class="sitPop">
      <div class="three"></div>
      <p class="lansile ellipsis"><span class="ellipsis">{{position.name}}</span><span><i class="iconfont icon-guanbi"
             style="font-size:14px;color:white;"
             @click.stop="$emit('closeP')"
             @touchstart.stop="$emit('closeP')"></i></span></p>
      <div class="sitImg">
        <img src="../../assets/img/sitImg.png">
        <span style="position:absolute;zIndex:109;border-radius:4px;display:inline-block;padding:2px 10px;textAlign:right;top:8px;;left:8px;"
              :style="{background:position.state!=='在线' ? '#8B8B8B' : areaConfig(type, position[type]).color}">{{position.state==='在线'?position[type]:'--'}}</span>
      </div>
      <p class="fansile ellipsis">{{position.address}}</p>
    </div>
  </bm-overlay>
</template>

<script>
import areaConfig from '../../common/js/range.js'
import { BmOverlay } from 'vue-baidu-map'
export default {
  props: ['position', 'type'],
  components: {
    BmOverlay
  },
  methods: {
    areaConfig (type, num) {
      return areaConfig(type, num)
    },
    draw ({ el, BMap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 25 + 'px'
      el.style.top = pixel.y - 35 + 'px'
    }
  },
  watch: {
    position () {
      this.$refs.customOverlay.reload()
    }
  }
}
</script>

<style lang="less" scoped>
.sitPop {
  width: 2.16rem;
  height: 1.76rem;
  background: #405891;
  box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
  border-radius: 0.12rem;
  min-width: 150px;
  min-height: 125px;
  position: absolute;
  color: white;
  left: 50%;
  transform: translate(-50%, -80%);
  z-index: 108;
  padding: 0.1rem;
  .three {
    position: absolute;
    width: 0.2rem;
    height: 0.2rem;
    bottom: -0.08rem;
    min-width: 15px;
    min-height: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    background: #405891;
    z-index: -1;
    border-radius: 0.04rem;
  }
  .sitImg {
    width: 100%;
    height: 60%;
    border-radius: 0.08rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.04rem;
  }
  p {
    width: 100%;
    margin: 0;
    margin-top: 0.04rem;
  }
  .lansile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.04rem;
    span {
      display: inline-block;
    }
    span:first-child {
      font-size: 0.14rem;
      width: 100%;
    }
  }
  .fansile {
    font-size: 0.12rem;
    opacity: 0.6;
  }
}
.sample {
  position: absolute;
  width: 50px;
  height: 50px;
}
</style>
